<template>
    <el-card class="box-card">
        <template #header>
        <div class="card-header">
            <span class="card-title">报价查询</span>
            <el-button type="primary" round @click="doSearchQutation(ruleFormRef)">查询</el-button>
        </div>
        </template>
        <el-form 
        :inline="true" 
        class="qutation-form"
        label-position="top"
        :model="formData"
        :rules="rules"
        ref="ruleFormRef"
        >
            <el-form-item label="目的地国家/地区" prop="country">
                <el-input placeholder="请输入关键词" clearable v-model="formData.country" />
            </el-form-item>
            <el-form-item label="重量" prop="weight">
                <el-input placeholder="请输入重量" clearable v-model="formData.weight"  />
            </el-form-item>
            <el-form-item label="包装类型" prop="packageType">
                <el-select placeholder="请选择" v-model="formData.packageType">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="渠道大类">
                <el-select placeholder="请选择" v-model="formData.shippingType">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script setup>
import { reactive,ref} from 'vue';
const ruleFormRef = ref();
const formData = reactive({
    country:'',
    weight:'',
    packageType:'',
    shippingType:''
})
//自定义校验规则,自定义规则必须在规则定义之前，否则提示找不到
const validatorWeight = (rule,value,callback)=>{
    if (value === '') {
        callback(new Error('请输入重量'))
    }else{
        if(/^[1-9]+$|^0\.[0-9]+$|^[1-9]\.[0-9]+$/.test(value)){
            callback();
        }else{
            callback(new Error('重量只能是数值'))
        }
    }
}
const rules = reactive({
    country:[
        { required: true, message: '请输入国家/地区', trigger: 'blur' },
    ],
    weight:[
        { validator: validatorWeight, trigger: 'blur' },
    ],
})
//查询
const doSearchQutation = (formEl)=>{
    if(!formEl)return;
    formEl.validate((valid)=>{ //表单校验，接收一个回调函数，返回promise
        if(valid){
            console.log('校验成功');
        }else{
            console.log('校验失败');
            return false;
        }
    })
}


</script>

<style lang="scss" scoped>

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}

.qutation-form .el-input{
  --el-input-width: 180px;
}

.el-form {
	--el-form-label-font-size: var(--el-font-size-base);
	--el-form-inline-content-width: 180px;
}
</style>